<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<base href="/">
	<title>Minishop - Free Bootstrap 4 Template by Colorlib</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

	<link rel="stylesheet" href="css/open-iconic-bootstrap.min.css">
	<link rel="stylesheet" href="css/animate.css">

	<link rel="stylesheet" href="css/owl.carousel.min.css">
	<link rel="stylesheet" href="css/owl.theme.default.min.css">
	<link rel="stylesheet" href="css/magnific-popup.css">

	<link rel="stylesheet" href="css/aos.css">

	<link rel="stylesheet" href="css/ionicons.min.css">

	<link rel="stylesheet" href="css/bootstrap-datepicker.css">
	<link rel="stylesheet" href="css/jquery.timepicker.css">

	<link rel="stylesheet" href="css/flaticon.css">
	<link rel="stylesheet" href="css/icomoon.css">
	<link rel="stylesheet" href="css/style.css">
</head>
<body class="goto-here">
<div class="py-1 bg-black">
	<div class="container">
		<div class="row no-gutters d-flex align-items-start align-items-center px-md-0">
			<div class="col-lg-12 d-block">
				<div class="row d-flex">
					<div class="col-md pr-4 d-flex topper align-items-center">
						<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-phone2"></span></div>
						<span class="text">+ 1235 2355 98</span>
					</div>
					<div class="col-md pr-4 d-flex topper align-items-center">
						<div class="icon mr-2 d-flex justify-content-center align-items-center"><span class="icon-paper-plane"></span></div>
						<span class="text">youremail@email.com</span>
					</div>
					<div class="col-md-5 pr-4 d-flex topper align-items-center text-lg-right">
						<span class="text">3 - 5 Business days delivery &amp; Free Returns</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<nav class="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light" id="ftco-navbar">
	<div class="container">
		<a class="navbar-brand" href="javascript:;">"鞋梦弄潮"鞋子商城</a>
		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
			<span class="oi oi-menu"></span> Menu
		</button>

		<div class="collapse navbar-collapse" id="ftco-nav">
			<ul class="navbar-nav ml-auto">
				<li class="nav-item active"><a href="shopping/index" class="nav-link">Home</a></li>
				<li class="nav-item"><a class="nav-link" id="headUserinfobutton" href="shopping/userinfo">userinfo</a></li>
				<li class="nav-item dropdown">
					<a class="nav-link dropdown-toggle" href="javascript:;" id="dropdown04" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Cataloge</a>
					<div class="dropdown-menu" aria-labelledby="dropdown04">
						<a class="dropdown-item" href="shopping/shop">Shop</a>
						<a class="dropdown-item" id="headCartbutton" href="shopping/cart">Cart</a>
					</div>
				</li>
				<li class="nav-item"><a href="shopping/about" class="nav-link">About</a></li>
				<li class="nav-item cta cta-colored"><a href="shopping/cart" id="headCartbutton1" class="nav-link"><span class="icon-shopping_cart"></span>[0]</a></li>

			</ul>
		</div>
	</div>
</nav>
<!-- END nav -->

<div class="hero-wrap hero-bread" style="background-image: url('image/bg_6.jpg');">
	<div class="container">
		<div class="row no-gutters slider-text align-items-center justify-content-center">
			<div class="col-md-9 ftco-animate text-center">
				<p class="breadcrumbs"><span class="mr-2"><a href="index.html">Home</a></span> <span>Cart</span></p>
				<h1 class="mb-0 bread">My Wishlist</h1>
			</div>
		</div>
	</div>
</div>

<section class="ftco-section ftco-cart">
	<div class="container">
		<div class="row">
			<div class="col-md-12 ftco-animate ">
				<div class="cart-list">
					<table class="table">
						<thead class="thead-primary">
						<tr class="text-center">
							<th><input type="checkbox" id="selectAll"></th> <!-- 全选复选框 -->
							<th>&nbsp;</th>
							<th>&nbsp;</th>
							<th>Product</th>
							<th>Price</th>
							<th>Quantity</th>
							<th>Total</th>
						</tr>
						</thead>
						<tbody id="cartbox">
						<!--<tr class="text-center">
							<td><input type="checkbox" class="productCheckbox"  cartname="cartcheck"></td> &lt;!&ndash; 商品复选框 &ndash;&gt;
							<td class="product-remove"><a href="javascript:;"><span class="ion-ios-close"></span></a></td>

							<td class="image-prod"><div class="img" style="background-image:url(image/product-3.jpg);"></div></td>

							<td class="product-name">
								<h3>Nike Free RN 2021 iD</h3>
							</td>

							<td class="price">$4.90</td>

							<td class="quantity">
								<div class="input-group mb-3">
									<input type="text" name="quantity" class="quantity form-control input-number" value="1" min="1" max="100">
								</div>
							</td>

							<td class="total">$4.90</td>
						</tr>&lt;!&ndash; END TR&ndash;&gt;-->


						</tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="row justify-content-start">
			<div class="col col-lg-5 col-md-6 mt-5 cart-wrap ftco-animate ">
				<div class="cart-total mb-3">
					<h3>Cart Totals</h3>
					<p class="d-flex">
						<span>购物车件数：</span>
						<span id="cartnumber"></span>
					</p>
					<p class="d-flex">
						<span>已选中的件数：</span>
						<span id="checknumber"></span>
					</p>
					<hr>
					<p class="d-flex total-price">
						<span>Total(dollars)</span>
						<span id="checktotal">17.60</span>
					</p>
				</div>
				<p class="text-center"><a href="javascript:;" id="settlementBtn" class="btn btn-primary py-3 px-4">Proceed to Checkout</a></p>
			</div>
		</div>
	</div>
</section>


<footer class="ftco-footer ftco-section">
	<div class="container">
		<div class="row">
			<div class="mouse">
				<a href="javascript:;" class="mouse-icon">
					<div class="mouse-wheel"><span class="ion-ios-arrow-up"></span></div>
				</a>
			</div>
		</div>
		<div class="row mb-5">
			<div class="col-md">
				<div class="ftco-footer-widget mb-4">
					<h2 class="ftco-heading-2">Minishop</h2>
					<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia.</p>
					<ul class="ftco-footer-social list-unstyled float-md-left float-lft mt-5">
						<li class="ftco-animate"><a href="javascript:;"><span class="icon-twitter"></span></a></li>
						<li class="ftco-animate"><a href="javascript:;"><span class="icon-facebook"></span></a></li>
						<li class="ftco-animate"><a href="javascript:;"><span class="icon-instagram"></span></a></li>
					</ul>
				</div>
			</div>
			<div class="col-md">
				<div class="ftco-footer-widget mb-4 ml-md-5">
					<h2 class="ftco-heading-2">Menu</h2>
					<ul class="list-unstyled">
						<li><a href="javascript:;" class="py-2 d-block">Shop</a></li>
						<li><a href="javascript:;" class="py-2 d-block">About</a></li>
						<li><a href="javascript:;" class="py-2 d-block">Journal</a></li>
						<li><a href="javascript:;" class="py-2 d-block">Contact Us</a></li>
					</ul>
				</div>
			</div>
			<div class="col-md-4">
				<div class="ftco-footer-widget mb-4">
					<h2 class="ftco-heading-2">Help</h2>
					<div class="d-flex">
						<ul class="list-unstyled mr-l-5 pr-l-3 mr-4">
							<li><a href="javascript:;" class="py-2 d-block">Shipping Information</a></li>
							<li><a href="javascript:;" class="py-2 d-block">Returns &amp; Exchange</a></li>
							<li><a href="javascript:;" class="py-2 d-block">Terms &amp; Conditions</a></li>
							<li><a href="javascript:;" class="py-2 d-block">Privacy Policy</a></li>
						</ul>
						<ul class="list-unstyled">
							<li><a href="javascript:;" class="py-2 d-block">FAQs</a></li>
							<li><a href="javascript:;" class="py-2 d-block">Contact</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="col-md">
				<div class="ftco-footer-widget mb-4">
					<h2 class="ftco-heading-2">Have a Questions?</h2>
					<div class="block-23 mb-3">
						<ul>
							<li><span class="icon icon-map-marker"></span><span class="text">203 Fake St. Mountain View, San Francisco, California, USA</span></li>
							<li><a href="javascript:;"><span class="icon icon-phone"></span><span class="text">+2 392 3929 210</span></a></li>
							<li><a href="javascript:;"><span class="icon icon-envelope"></span><span class="text">info@yourdomain.com</span></a></li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 text-center">

				<p>Copyright &copy; 2021.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
		</div>
	</div>
</footer>


<!-- loader -->
<div id="ftco-loader" class="show fullscreen"><svg class="circular" width="48px" height="48px"><circle class="path-bg" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke="#eeeeee"></circle><circle class="path" cx="24" cy="24" r="22" fill="none" stroke-width="4" stroke-miterlimit="10" stroke="#F96D00"></circle></svg></div>


<script src="js/jquery.min.js"></script>
<script src="js/jquery-migrate-3.0.1.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.easing.1.3.js"></script>
<script src="js/jquery.waypoints.min.js"></script>
<script src="js/jquery.stellar.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/jquery.magnific-popup.min.js"></script>
<script src="js/aos.js"></script>
<script src="js/jquery.animateNumber.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script src="js/scrollax.min.js"></script>

<script src="js/google-map.js"></script>
<script src="js/main.js"></script>

<script>


		// 全选功能
		$('#selectAll').change(function () {
			var isChecked = $(this).is(':checked');
			$('.productCheckbox').prop('checked', isChecked);
			checkAllTotal();
		});


</script>

<script type="text/html" id="cartitem">
	<tr class="text-center" cartname="cartitem">
		<td><input type="checkbox" class="productCheckbox" cartname="cartcheck"></td> <!-- 商品复选框 -->
		<td class="product-remove"><a href="javascript:;"><span class="ion-ios-close" cartproductid=""></span></a></td>

		<td class="image-prod"><div class="img"></div></td>

		<td class="product-name">
			<h3></h3>
		</td>

		<td class="price">$<span></span></td>

		<td class="quantity">
			<div class="input-group mb-3">
				<button subtractbtn cartproductid="">-</button>
				<input type="text" name="quantity" cartproductid="" class="quantity form-control input-number" value="1" min="1" max="100">
				<button plusbtn cartproductid="">+</button>
			</div>
		</td>

		<td class="total">$<span></span></td>
	</tr><!-- END TR-->
</script>
<script src="layui/layui.all.js"></script>
<script>
	const $=layui.$;
	const layer=layui.layer;
	showCarts();
	checkAllTotal();
	function showCarts() {
		$.ajax({
			url: 'cart/getCarts',
			async: false,
			success: function (result) {
				console.log(result);
				let data = result.data;
				let itemtext = $("#cartitem").text();
				for (let i = 0; i < data.length; i++) {
					let $item = $(itemtext);
					//改内容
					let mainImageUrl = "";
					if (data[i].product.imgurl && data[i].product.imgurl.length > 0) {
						for (let j = 0; j < data[i].product.imgurl.length; j++) {
							if (data[i].product.imgurl[j].is_main === 1) {
								mainImageUrl = data[i].product.imgurl[j].imgurl;
								break;
							}
						}
					}

					$item.find('.image-prod .img').css('background-image', 'url(' + mainImageUrl + ')');
					$item.find(".product-name h3").text(data[i].product.name);
					$item.find("[name='quantity']").val(data[i].quantity);
					$item.find(".price span").text(data[i].product.price);
					$item.find(".total span").text(data[i].product.price * data[i].quantity);
					$item.find("[cartproductid]").attr("cartproductid", data[i].product_id);
					$("#cartbox").append($item);
				}
			}
		});
	}
	// 反选功能（当所有商品复选框都被选中时，全选复选框也被选中；否则取消全选复选框的选中状态）
	$('.productCheckbox').change(function () {
		var allChecked = $('.productCheckbox').length === $('.productCheckbox:checked').length;
		$('#selectAll').prop('checked', allChecked);
		checkAllTotal();
	});


	//删除
	$(".ion-ios-close").click(function(){
		let productid=$(this).attr("cartproductid");
		let $this=$(this);
		// 避免误操作
		layer.confirm("确认要删除该数据吗?",function(){
			$.ajax({
				url:"cart/delete",
				data:{product_id:productid},
				success:function(result){
					let code=result.code;

					let data=result.data;
					let msg=result.msg;
					//重新加载数据
					//showCarts();
					$this.parents("[cartname='cartitem']").remove();
					//提示删除成功
					layer.msg(msg,{icon:1,time:1800});
					checkAllTotal();
				}
			})
		});
	});

	$("[subtractbtn]").click(function(){
		let $numberDom=$(this).siblings("[name='quantity']");
		let oldNumber=$numberDom.val();
		let newNumber=Number(oldNumber)-1;
		let productid=$(this).attr("cartproductid");
		changeNumber($numberDom,productid,newNumber);
	});

	$("[plusbtn]").click(function(){
		let $numberDom=$(this).siblings("[name='quantity']");
		let oldNumber=$numberDom.val();
		let newNumber=Number(oldNumber)+1;
		let productid=$(this).attr("cartproductid");
		changeNumber($numberDom,productid,newNumber);
	});
	$("[name='quantity']").blur(function(){
		let productid=$(this).attr("cartproductid");
		let $dom=$(this);
		let number=$(this).val();
		changeNumber($dom,productid,number);

	});

	function changeNumber(dom,productid,number){
		let $domNumber=dom;
		$.ajax({
			url:'cart/edit',
			data:{product_id:productid,quantity:number},
			success:function(result){
				if(result.code==200){
					layer.msg(result.msg,{icon:1,time:1800});
					$domNumber.val(result.data);
				}else{
					layer.msg(result.msg,{icon:2});
					if(number>99){
						number=99;
						$domNumber.val(99);
					}
					if(number<1){
						number=1;
						$domNumber.val(1);
					}

				}
				let $cartitem= $domNumber.parents("[cartname='cartitem']");
				//变更合计
				let price=$cartitem.find(".price span").text();
				let total=Number(price)*Number(number);
				$cartitem.find(".total span").text(total);
				checkAllTotal();
			}
		});
	}

	$("[cartname='cartcheck']").change(function(){
		checkAllTotal();
	});
	//显示总的合计
	function checkAllTotal(){
		let total=0;
		$("[cartname='cartcheck']:checked").each(function(index,dom){
			let $cartitem= $(dom).parents("[cartname='cartitem']");
			//变更合计
			let price=$cartitem.find(".price span").text();
			let number=$cartitem.find("[name='quantity']").val();
			total+=Number(price)*Number(number);

		});
		$("#checktotal").text(total);
		let checknumber=$("[cartname='cartcheck']:checked").length;
		let cartnumber=$("[cartname='cartcheck']").length;
		$("#cartnumber").text(cartnumber);
		$("#checknumber").text(checknumber);
	}


	$("#settlementBtn").click(function(){
		//准备数据
		//productids   counts
		//$number  被选中的复选框所在行的number组件  其中 value就是数量   cartproductid属性记录了商品id
		let $number= $("[cartname='cartcheck']:checked").parents("[cartname='cartitem']").find("[name='quantity']");
		let productids="";
		let counts="";
		if($number.length>0){
			$number.each(function(index,item){
				let proid=$(item).attr("cartproductid");
				let count=$(item).val();
				$.ajax({
					url:'product/decStock',
					data:{productid:proid,
					      quantity:count},
					success:function(result){
						layer.msg(result.msg);
					}
				});
				productids+=(proid+",");
				counts+=(count+",");
			});
			productids=productids.substring(0,productids.length-1);
			counts=counts.substring(0,counts.length-1);
			//准备好数据
			location.href="shopping/checkout?productids="+productids+"&counts="+counts;
		}else{
			layer.msg("请选择需要购买的商品",{icon:6,time:2000});
		}
	});

</script>

<script>

	function showCartCount() {
		$.ajax({
			url: 'cart/showCartCount',
			async: false,
			success: function (result) {

				console.log(result);

				let data = result.data;
				if (!data)
				{
					$("#headCartbutton1").text("CART["+0+"]");

				}else {
					$("#headCartbutton1").text("CART["+data+"]");
				}

			}
		});
	}  //这是顶部导航栏的购物车参数展示
	showCartCount();

</script>



</body>
</html>